<template>
    <div>
        <h3>About组件：toRaw toRef和markRaw</h3>
        <!-- <p>{{state.name}}</p>
        <button @click="testToRaw">点击测试toRaw</button> -->

        <!-- <p>{{state.name}}</p>
        <button @click="testMarkRaw">测试marktoRaw</button> -->

        <p>state.age的值:{{state.age}}</p>
        <button @click="testToRef">点击通过toRef修改age变成响应式，修改响应式改变原始数据但不触发ui更新</button>
    </div>
</template>
<script>
import { markRaw, reactive, ref, toRaw, toRef } from 'vue'
    export default{
        name: 'About',
        setup(){
            //state与obj的关系：state本质上是Proxy对象，在这个对象中引用了obj
            //toRaw拿到包装的原始数据
            
            //1.reactive形式：
            /* let obj = {name: 'zqf', age: 123}
            let state = reactive(obj)
            let obj2 = toRaw(state)
            
            function testToRaw(){
                //直接修改state会触发页面更新增加性能消耗，通过toRaw包装拿到原始数据进行更新不会被追踪减少性能消耗。
                obj2.name = 'lishi'
                console.log(obj)
                console.log(state)
                console.log(obj2)
                console.log(obj === state)//false
                console.log(obj === obj2)//true
            }
            return {obj, state, obj2, testToRaw} */

            //2.ref形式：
            /* let obj = {name: 'zqf', age: 123}
            let state = ref(obj)
            //ref的本质是reactive
            //ref(obj) => reacitve({value: obj}),因此通过toRaw获取原始数据为toRaw(state.value)
            let obj2 = toRaw(state.value)
            
            function testToRaw(){
                obj2.name = 'lishi'
                console.log(obj)
                console.log(state)
                console.log(obj2)
                console.log(obj === state)//false
                console.log(obj === obj2)//true
            }
            return {obj, state, obj2, testToRaw} */

            //3.markRaw设置对象不被追踪
           /*  let userInfo = {
                name: 'zqf',
                age: 12,
            }
            //通过markRaw设置userInfo不被追踪
            markRaw(userInfo)
            let state = reactive(userInfo)
            function testMarkRaw(){
                state.name = 'wangwu'
                console.log(state)
            }
            return {state, userInfo, testMarkRaw} */

            //4.toRef
            //利用ref将对象的属性变成响应式数据，修改响应式数据不改变原始数据，触发UI更新
            /* let userObj = {info: 'zs'}
            let state = ref(userObj.info)
            function testToRef() {
                state.value = 'lisi'
                console.log(state)//lisi
                console.log(userObj)//sz
            }
            return {userObj, state, testToRef} */

            //利用toRef将对象的属性变成响应式数据，修改响应式数据改变原始数据，不触发UI更新
            let userObj = {info: {age: 12}}
            let state = toRef(userObj, 'info')
            function testToRef() {
                state.value.age = 333
                console.log(state.value.age)//age=33
                console.log(userObj.info.age)//age=33
            }
            return {userObj, state, testToRef}


        },
    }
</script>
<style scoped>

</style>